<template>
	<page-meta :page-style="'overflow:hidden'">
		<gzPageWrapper ref="gzPageWrapperRef" :styles="{ background: '#f7f8fb' }" :up="{ use: true, auto: false, textNoMore: '--暂无更多--', empty: { use: false }, page: { size: 20 } }" :down="{ use: true, auto: false }" :nav="{ use: false }" :scroll="{ top: 480, fixed: true }" @upCallback="upCallback">
			<template #top>
				<view class="top-content">
					<view class="header" :style="{ paddingTop: `${statusBarHeight + 11}px` }">
						<view>附近商圈</view>
						<view style="display: flex; align-items: center; gap: 10px;justify-content: center;">
							<image src="../../static/new/businessCircle/subtitle-icon.png" style="width: 24rpx;height: 26rpx;"></image>
							<text style="color: #666666; font-size: 26rpx;">一起探索商圈好店，赢品牌好礼</text>
						</view>
					</view>
					<view class="map-container">
						<view class="adress">
							<view class="left">
								<image src="@/static/new/businessCircle/location2.png"></image>
								<view>{{ vdata.currentLocation }}</view>
							</view>
							<!-- <view class="right">
								<text>其他地址</text>
								<image src="@/static/new/arrow-right.png"></image>
							</view> -->
						</view>
						<view class="search-input">
							<view class="search-input-inner">
								<input v-model="params.mchName" type="text" placeholder="请输入商户名称进行搜索">
								<button class="search-btn" plain @click="onSearchHandle">
									<uni-icons type="search"></uni-icons>
								</button>
							</view>
						</view>
						<view class="map">
							<map style="width: 100%; height: 380rpx;border-radius: 25rpx;" :latitude="params.location.latitude" :longitude="params.location.longitude" :markers="data.markers" :enable-building="false" :circles="data.circles">
								<cover-view slot="callout">
									<template v-for="item in data.markers">
										<cover-view class="custom-callout-text" :marker-id="item.id">
											{{ item.mchName }}
										</cover-view>
									</template>
								</cover-view>
							</map>
						</view>
					</view>
				</view>
			</template>
			<template #default>
				<view class="list-container">
					<view class="group-list">
						<view class="group-item" v-for="item in data.groupList">
							<view class="left">
								<image v-if="item.mchListImage" :src="item.mchListImage"></image>
								<template v-else-if="item.mcc && item.mcc instanceof Array && item.mcc.length > 1">
									<image v-if="item.mcc[0] == 1" src="@/static/svg/mch-default-img1.svg"></image>
									<image v-else-if="item.mcc[0] == 2" src="@/static/svg/mch-default-img2.svg"></image>
									<image v-else-if="item.mcc[0] == 3" src="@/static/svg/mch-default-img3.svg"></image>
									<image v-else-if="item.mcc[0] == 4" src="@/static/svg/mch-default-img4.svg"></image>
									<image v-else-if="item.mcc[0] == 5" src="@/static/svg/mch-default-img5.svg"></image>
									<image v-else src="@/static/svg/mch-default-img1.svg"></image>
								</template>
								<image v-else src="@/static/svg/mch-default-img1.svg"></image>
								<view class="desc">
									<view class="tle">{{ item.mchName }}</view>
									<view class="dis">{{ tool.filterDistance(item.distance) }}</view>
									<view class="addr">
										<image src="@/static/new/businessCircle/location.png"></image>
										<text class="text">{{ item.address }}</text>
									</view>
								</view>
							</view>
							<view class="right">
								<!-- <image class="collect" src="@/static/new/businessCircle/collect.png"></image> -->
								<view v-if="item.orderSort === 1" class="top-tag">优选</view>
								<image v-else></image>
								<image v-if="!item.location.latitude || !item.location.longitude" @tap.stop="navigation(item)" class="nav" src="@/static/new/businessCircle/no-nav.png"></image>
								<image v-else @tap.stop="navigation(item)" class="nav" src="@/static/new/businessCircle/nav.png"></image>
							</view>
						</view>
					</view>
					<gzListNull :list="data.groupList"></gzListNull>
				</view>
			</template>
		</gzPageWrapper>
	</page-meta>
</template>

<script setup>
	import { $mchList, $marktingGroupNearList } from '@/http/apiManager.js'
	import tool from '@/util/tool.js'
	import appConfig from '@/config/appConfig.js'
	import { reactive, ref, getCurrentInstance, nextTick } from 'vue'
	import { onLoad, onShow } from '@dcloudio/uni-app';
	import gzListNull from '@/components/gzListNull/gzListNull.vue'; //空数据组件
	import getLocation from '@/util/location.js' // 授权 拉取定位信息 异步函数 返回 经纬度和地址信息
	import storageManage from '@/util/storageManage.js'

	const { $infoBox } = getCurrentInstance().appContext.config.globalProperties

	const gzPageWrapperRef = ref()

	const statusBarHeight = ref(getApp().globalData.statusBarHeight)

	const vdata = reactive({
		currentLocation: '', // 用户当前定位地址
	})

	const data = reactive({
		// 商圈列表数据
		groupList: [],
		// 地图相关
		id: 0, // 使用 marker点击事件 需要填写id
		title: 'map',

		circles: [],
		markers: [{
			id: 0,
			latitude: 34.7466287061769,
			longitude: 113.62536678210733,
		}],
	})

	const params = reactive({
		location: {
			latitude: 34.7466287061769,
			longitude: 113.62536678210733,
		},
		radius: 10000,
		agentNo: storageManage.agentInfo().agentNo,
		mchName: '', // 根据商户名称进行筛选
	})

	/**
	 * 根据商户名称进行列表检索
	 */
	const onSearchHandle = () => {
		gzPageWrapperRef.value.getMescroll().resetUpScroll()
	}

	onLoad(async () => {
		// 初始化 用户定位信息 以及商户列表
		nextTick(() => {
			gzPageWrapperRef.value.getMescroll().resetUpScroll()
		})
	})
	// 导航到商圈
	function navigation({ mchName, address, location }) {
		const { latitude, longitude } = location
		if (!latitude || !longitude) {
			// #ifdef MP-YHDD
			$infoBox.toast('商户GPS数据缺失，无法导航！')
			// #endif
			// #ifndef MP-YHDD
			$infoBox.toast('非小邮付商户，暂无GPS数据！')
			// #endif
			return
		}
		uni.openLocation({
			latitude,
			longitude,
			name: mchName,
			address
		});
	}
	// 商圈详情 -- 商户列表 活动列表
	function toViewInfo(groupInfo) {
		uni.navigateTo({
			url: '/pages/pageBusinessCircle/viewInfo?groupInfo=' + JSON.stringify(groupInfo)
		})
	}

	/**
	 * 上拉加载回调
	 */
	/* function upCallback(mescroll){
		const { size, num } = mescroll
		$marktingGroupNearList({ ...params, pageSize: size, pageNumber: num }).then(({ bizData }) => {
			if(num == 1) data.groupList = []
			data.groupList = data.groupList.concat(bizData.records)
			mapHandle(bizData.records)
			mescroll.endSuccess(bizData.records.length,bizData.hasNext)
		}).catch(() => {
			mescroll.endErr()
		})
	} */
	async function upCallback(mescroll) {
		const { size, num } = mescroll
		try {
			// 定位用户 只有 num == 1 时 才重新定位用户
			uni.showLoading({ title: '加载中...' })
			if(num == 1){
				const { longitude, latitude, address } = await getLocation()
				vdata.currentLocation = address
				params.location = {
					longitude,
					latitude
				}
				// 标记自己的位置
				data.markers[0].latitude = latitude
				data.markers[0].longitude = longitude
			}
			// 请求商户列表
			const { bizData } = await $mchList({ ...params, pageSize: size, pageNumber: num })
			if (num == 1) {
				data.groupList = []
				data.markers = [{
					id: 0,
					latitude: params.location.latitude,
					longitude: params.location.longitude,
				}]
			}
			bizData.records = bizData.records.filter(item => {
				if (item) {
					if (item.mcc) {
						return { ...item, mcc: JSON.parse(item.mcc) }
					} else {
						return { ...item, mcc: [0] }
					}
				}
			})
			data.groupList = data.groupList.concat(bizData.records)
			mapHandle(bizData.records, bizData.current)
			uni.hideLoading()
			if (num >= 10) {
				mescroll.endSuccess(0)
			} else {
				mescroll.endSuccess(bizData.records.length, bizData.hasNext)
			}
		} catch (e) {
			// mescroll.endSuccess(0)	// 在上拉加载过程中出现错误,结束上拉(避免一直出现错误)
			mescroll.endErr()
		}

	}
	/**
	 * 地图展示处理
	 */
	function mapHandle(newData, currentPage) {
		const tempMarkers = []
		newData.forEach((item, index) => {
			const { latitude, longitude } = item.location
			tempMarkers.push({
				id: currentPage * 10 + index,
				width: 20,
				height: 20,
				iconPath: 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/b965c95d-61e0-4c8e-ae68-e8160da05c59.png',
				latitude,
				longitude,
				customCallout: {
					display: 'BYCLICK',
					anchorY: -5
				},
				mchName: item.mchName
			})

		})
		data.markers = data.markers.concat(tempMarkers)
	}
</script>
<style lang="less">
	.top-content {
		width: 100%;
		height: 388px;
		box-sizing: border-box;
		position: fixed;
		z-index: 998;
		background: #ebeef2;

		.header {
			width: 100%;
			height: 133px;
			text-align: center;
			font-size: 28rpx;
			gap: 24rpx;
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
			background: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/38b6a823-b121-4d73-81cc-4dfa5f0757a6.png') no-repeat top left / 100% 133px;
		}

		.map-container {
			width: 100%;
			height: 255px;
			padding: 34rpx 34rpx 0;
			background: #f7f8fb;
			border-radius: 40rpx 40rpx 0rpx 0rpx;
			box-sizing: border-box;

			.adress {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left {
					width: 100%;
					display: flex;
					align-items: center;

					image {
						width: 30rpx;
						height: 30rpx;
						margin-right: 12rpx;
						flex-shrink: 0;
					}

					view {
						width: calc(100% - 45rpx);
						font-weight: 500;
						font-size: 30rpx;
						color: #333333;
						white-space: nowrap;
						/* 禁止文本换行 */
						overflow: hidden;
						/* 隐藏超出范围的内容 */
						text-overflow: ellipsis;
						/* 使用省略号 */
					}
				}

				.right {
					display: flex;
					align-items: center;

					text {
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
					}

					image {
						width: 12rpx;
						height: 20rpx;
						margin-left: 12rpx;
					}
				}
			}

			.search-input {
				background: #fff;
				border-radius: 16rpx;
				margin-top: 24rpx;
				padding: 24rpx;

				.search-input-inner {
					display: flex;
					justify-content: space-between;
					align-items: center;
					background: #f7f8fb;
					border-radius: 45rpx;
					padding: 12rpx 24rpx;

					input {
						flex-grow: 1;
					}

					button {
						flex-shrink: 0;
						height: initial;
						line-height: initial;
						margin: 0;
						border: none;
					}
				}
			}

			.map {
				padding: 10rpx;
				background-color: #fff;
				border-radius: 25rpx;
				margin-top: 24rpx;

				.custom-callout-text {
					display: inline-flex;
					justify-content: center;
					align-items: center;
					min-width: 20rpx;
					background: #24c789;
					color: #fff;
					padding: 5rpx 10rpx;
					font-size: 28rpx;
					border-radius: 6rpx;
				}
			}
		}


	}

	.list-container {
		background-color: #f7f8fb;
		padding: 15rpx 34rpx 0;
		box-sizing: border-box;

		.group-list {
			display: flex;
			flex-direction: column;
			gap: 24rpx;

			.group-item {
				padding: 24rpx;
				background-color: #fff;
				border-radius: 24rpx;
				display: flex;

				.left {
					display: flex;

					image {
						width: 146rpx;
						height: 146rpx;
						margin-right: 18rpx;
						flex-shrink: 0;
						border-radius: 15rpx;
					}

					.desc {
						width: 390rpx;
						display: flex;
						flex-direction: column;
						padding: 10rpx 0;
						justify-content: space-between;

						.tle {
							font-weight: 500;
							font-size: 32rpx;
							color: #333333;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.dis {
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
						}

						.addr {
							display: flex;
							align-items: center;

							image {
								width: 24rpx;
								height: 26rpx;
								margin-right: 10rpx;
							}

							.text {
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
								font-weight: 400;
								font-size: 24rpx;
								color: #999999;
							}
						}
					}
				}

				.right {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: flex-end;
					margin-left: 24rpx;
					flex-shrink: 0;

					.top-tag {
						background: #080808;
						color: #e3b087;
						padding: 5rpx 10rpx;
						border-radius: 8rpx;
						font-size: 24rpx;
					}

					image {
						&:nth-child(1) {
							width: 28rpx;
							height: 26rpx;
						}

						&:nth-child(2) {
							width: 60rpx;
							height: 60rpx;
						}
					}
				}
			}
		}
	}
</style>